<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=no'>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<style type="text/css">
		html,
		body {
			width: 100%;
			height: 100%;
			background-color: #f0f0f0;
		}
		
		.text {
			margin: 20px;
			padding-left: 20px;
		}
		
		.text1 {
			padding-left: 40px;
		}
		
		li {
			border-bottom: 1px solid #eee;
			padding: 2px 10px;
		}
		
		[v-cloak] {
			display: none;
		}
	</style>

	<body>
		<div id="app" v-cloak>
			<div style="display: flex;display: -webkit-flex;flex-direction: column;height: 195px;width: 100%;background-image: url(img/背景.png);background-size: cover;">
				<img src="img/奖品.png" style="width: 80px;height: 110px;align-self: center;margin: 0 auto;position: relative;z-index: 2;margin-top: 40px;" />
				<img src="img/阴影.png" / style="width: 200px;margin: -10px auto;position: relative;z-index: 1;">
			</div>
			<div style="width: 320px;height: 40px;background-color: #ffc800;border-radius: 30px;text-align: center;line-height: 40px;font-size: 18px;color: white;margin: 0 auto;margin-top: -20px;margin-bottom: 20px;">
				我的奖品
			</div>
			<div v-for="item in list" style="margin: 10px 20px;background-color: white;display: flex;display: -webkit-flex;flex-direction: row;border-radius: 10px;padding: 15px;">
				<div style="width: 90px;height: 125px;border-radius: 10px;overflow: hidden;margin-right: 10px;">
					<img src="img/代金券.png" / style="width: 100%;height: 100%;">
				</div>
				<div style="display: flex;display: -webkit-flex;align-items: center;">
					<ul>
						<li>
							四等奖：{{item.prizeName}}
						</li>
						<li>
							日期：{{item.winprizeTime}}
						</li>
						<li>
							中奖编码：{{item.openid}}
						</li>
						<li>
							领取地址：安阳铁西路与文明大道交叉口向东200米路南武校院内
						</li>
						<li>
							使用有效期：即日起至2019-2-19
						</li>

					</ul>
				</div>
			</div>
		</div>

		<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript" charset="utf-8">
			var vm;
			$(function() {
				vm = new Vue({
					el: '#app',
					data: {
						list: []
					},
					methods: {

					}
				})
				getData();
			})

			function getData() {
				var openid = sessionStorage.getItem('openid')
				$.ajax({
					url: "http://www.everydaytech.cn:1051/api/Prize/GetUserPrizeInfo?openid=" + openid,
					type: 'get',
					dataType: 'json',
					timeout: 1000,
					success: function(data, status) {
						console.log(data)
						if(data.success) {
							var list = data.data;
							vm.list = list
						}
					},
					fail: function(err, status) {
						console.log(err)
					}
				})

			}
		</script>
	</body>

</html>